<template>
  <basic-dialog
    title="申请证书"
    :visible="visible"
    :loading="submitLoading"
    :confirm-button-disabled="loading"
    :width="1000"
    has-footer
    @closed="handleClose"
    @open="handleOpen"
    @submit="handleSubmit"
  >
    <section v-if="!loading">
      <div class="text-xs/5 font-[700] mb-6 text-[#393C40]">
        请到DNS解析服务商处添加以下解析记录：
      </div>
      <el-table
        v-loading="loading"
        :tooltip-options="{ popperClass: 'basic-tooltip' }"
        class="basic-table max-h-[400px]"
        :data="detailTableData"
      >
        <template #empty><table-empty /></template>
        <!--
        <el-table-column
          prop="domain"
          label="域名"
          show-overflow-tooltip
          :formatter="emptyFormatter"
          min-width="80"
        />
        <template #default="{ row }">
            <basic-copy-content :text="row.resolve"></basic-copy-content>
          </template>
        -->
        <el-table-column
          prop="resolve"
          label="主机记录"
          min-width="120"
          :formatter="emptyFormatter"
        />
        <el-table-column
          prop="value"
          label="记录值"
          min-width="200"
          :formatter="emptyFormatter"
        >
          <template #default="{ row }">
            <basic-copy-content :text="row.value"></basic-copy-content>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="80">
          <template #default>TXT</template>
        </el-table-column>
      </el-table>
    </section>
    <div v-else class="flex items-center justify-center h-[100px]">
      正在获取 DNS 解析值，请稍后...
    </div>
  </basic-dialog>
  <log-dialog
    v-model:visible="logState.visible"
    :record="{ id: record.id!,title: record.primary_domain! }"
    @refresh-row="row => emit('refresh-row', row)"
  />
</template>

<script setup lang="ts">
import type { CertDnsRecordModel, CertModel } from '@/apis/model/cert'

import { normalLog } from '../state'
import LogDialog from './LogDialog.vue'
interface IProps {
  visible: boolean
  record: CertModel
  loading: boolean
}
interface IEmits {
  (event: 'update:visible', value: boolean): void
  (event: 'update:loading', value: boolean): void
  (event: 'refresh'): void
  (event: 'refresh-row', row: CertModel): void
}

const props = defineProps<IProps>()
const emit = defineEmits<IEmits>()
const detailTableData = ref<CertDnsRecordModel[]>([])
const logState = reactive({
  visible: false,
  loading: false
})
const getRecord = () => {
  emit('update:loading', true)
  getDnsRecordApi({ id: props?.record?.id! })
    .then(res => {
      detailTableData.value = res.list || []
    })
    .finally(() => emit('update:loading', false))
}
const handleOpen = () => {
  getRecord()
}
const handleClose = () => {
  detailTableData.value = []
  emit('update:visible', false)
}
const submitLoading = ref(false)
function handleSubmit() {
  submitLoading.value = true
  normalLog(props.record.id!).then(() => {
    applyCertApi({ id: props.record.id! })
      .then(() => {
        logState.visible = true
        emit('update:visible', false)
      })
      .finally(() => (submitLoading.value = false))
  })
}
</script>

<style lang="scss" scoped></style>
